<template>
  <div class="prescriptionInvalid-page">
    <!-- 头部信息 -->
      <header>
        <div class="filter-part">
          <div class="filter-item">
            <Radio-group v-model="filterObj.timeType" type="button" :key="filterObj">
                <Radio :label="0">今日</Radio>
                <Radio :label="1">近一周</Radio>
                <Radio :label="2">近一月</Radio>
            </Radio-group>
          </div>
          <div class="filter-item">
            <threeLevelLinkage v-model="filterObj.docInfo" :onChange="onDocInfoChange"/>
          </div>
          <div class="filter-item">
            <label>药师：</label>
            <div class="content">{{pharmacistName}}</div>
            <Button type="primary" @click="showChoosePharmacistModal = true">选择药师</Button>
          </div>
          <div class="filter-item">
            <label>选择日期：</label>
            <DatePicker v-model="filterObj.fromTime"/>
            <span style="lineHeight: 2; padding: 0 5px">~</span>
            <DatePicker v-model="filterObj.endTime"/>
          </div>
          <div class="filter-btn-group">
            <Button style="width:75px;height:35px;" type="primary" @click="handleSearch"  icon="ios-search">查询</Button>
            <Button style="width:75px;height:35px;" @click="reset" icon="icon-gengxin">
              <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>重置
            </Button>
          </div>
        </div>
      </header>
      <pharmacistChoose v-model="showChoosePharmacistModal" :onOk="onPharmacistOk"/>
      <Row class="chart-part">
        <Col span="14" >
          <h3>处方不合规统计图</h3>
          <div style="overflow-x: auto;overflow-y:hidden;" v-if="filterObj.timeType !=0 && filterObj.timeType !=1 && chartOptionFlag">
              <div :style="stylecss">
                  <basicChart :chartOption="chartOptionBar"/>
              </div>
          </div>
          <div v-if="filterObj.timeType == 0 || filterObj.timeType == 1">
              <div style="width:100%;height:400px;overflow:none">
                  <basicChart :chartOption="chartOptionBar"/>
              </div>
          </div>
        </Col>
        <Col span="10">
          <h3>驳回理由占比</h3>
          <div style="width: 100%; height: 400px;">
            <basicChart :chartOption="chartOptionPie"/>
          </div>
        </Col>
        <Col span="24">
          <div>
            <h3 style="padding: 10px 0">不合规处方信息</h3>
            <!-- 列表 -->
            <div class="table">
              <Table
                size="small"
                :columns="columns"
                :data="tableData"
                @on-selection-change="selectChange"
                :loading="tableLoading"
                no-data-text="未查询到符合条件的记录"
                stripe
              ></Table>

              <div class="page-wrapper">
                <div class="des">
                  显示第{{pageSize * (pageNo - 1) + 1}}到第{{pageSize * pageNo}}条记录，总共{{count}}条记录 每页显示
                  <i-select class="select" v-model.trim="pageSize" placeholder="请输入在用状态">
                    <i-option :value="10">10</i-option>
                    <i-option :value="20">20</i-option>
                    <i-option :value="50">50</i-option>
                  </i-select>条记录
                </div>
                <Page
                  :total="count"
                  :current="pageNo"
                  :page-size="pageSize"
                  @on-change="loadPage"
                  class="pages"
                />
              </div>
            </div>
          </div>
        </Col>
      </Row>
      <list-mask v-if="madecode" :madecode='madecode' :clinic="clinic" :rpList='rpList' @showModal= 'showModal' />
  </div>
</template>

<script>
import api from "@/api/commonApi";
import pharmacistChoose from "@/components/choose/pharmacistChoose";
import threeLevelLinkage from "@/components/threeLevelLinkage";
import basicChart from "@/components/echarts/basicChart";
import ListMask from '@/pages/drugfirmsmanage/chufang/listMask';
import Utils from '../../../utils';
import { DatePicker } from "view-design";
const filterObj = {
  timeType: 2,
  docInfo: [],
  pharmacistId: null,
  fromTime: null,
  endTime: null
};
export default {
  components: {
    pharmacistChoose,
    threeLevelLinkage,
    basicChart,
    ListMask,
    DatePicker
  },
  data() {
    return {
      chartOptionFlag: true,
      filterObj: this.deepClone(filterObj),
      stylecss: "width:3000px;height:400px",
      // 不合规处方信息table
      pageSize: 10,
      pageNo: 1,
      tableLoading: false,
      count: null,
      tableData: [],
      columns: [
        { type: "index", title: "排序", width: 60, align: "center" },
        { title: "处方号", key: "rxNumber", align: "center" },
        { title: "取药码", key: "drugCode", align: "center" },
        { title: "处方医院", key: "hospitalName", align: "center" },
        { title: "处方医生", key: "operator", align: "center" },
        { title: "患者姓名", key: "name", align: "center" },
        { title: "药师姓名", key: "pharmacyName", align: "center" },
        {
          title: "不合规类型", key: "searchStatus", align: "center", render(h, params) {
            return params.row.searchStatus;
          }
        },
        { title: "审核原因", key: "firstReport", align: "center" },
        { title: "处方时间", key: "createtime", align: "center" },
        {
          title: "操作",
          key: "iOperate",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    size: "small",
                    type: "primary"
                  },
                  style: {
                    margin: "0px"
                  },
                  on: {
                    click: () => {
                      this.handleDetail(params.row);
                    }
                  }
                },
                "详情"
              )
            ]);
          }
        }
      ],
      // 处方弹窗相关
      madecode: false,
      masklist: {},
      showChoosePharmacistModal: false,
      chartOptionBar: {
          color: ['#3398DB'],
          tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
                  type: 'category',
                  data: [],
                  axisTick: {
                      alignWithLabel: true
                  }
              }
          ],
          yAxis: [
              {
                  type: 'value'
              }
          ],
          series: [
              {
                  name: '处方不合规',
                  type: 'bar',
                  barWidth: '10',
                  data: [],
                  showBackground: false,
                  itemStyle: {
                    normal: {
                        show: true,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#2f4554'
                        }, {
                            offset: 1,
                            color: '#2f4554'
                        }]),
                        barBorderRadius: 50,
                        borderWidth: 0,
                    }
                },
              },
              {
                  name: '超长处方',
                  type: 'bar',
                  barWidth: '10',
                  data: [],
                  showBackground: false,
                  itemStyle: {
                      normal: {
                          show: true,
                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: '#c23531'
                          }, {
                              offset: 1,
                              color: '#c23531'
                          }]),
                          barBorderRadius: 50,
                          borderWidth: 0,
                      }
                  },
              },
              {
                  name: '用药不适宜',
                  type: 'bar',
                  barWidth: '10',
                  data: [],
                  showBackground: false,
                  itemStyle: {
                      normal: {
                          show: true,
                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: '#61a0a8'
                          }, {
                              offset: 1,
                              color: '#61a0a8'
                          }]),
                          barBorderRadius: 50,
                          borderWidth: 0,
                      }
                  },
              }
          ]
      },
      chartOptionPie: {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
              orient: 'vertical',
              right: 10,
              top: 20,
              bottom: 20,
              data: [],
          },
          series: [
              {
                  name: '驳回理由',
                  type: 'pie',
                  radius: '55%',
                  center: ['40%', '50%'],
                  data: [],
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      },
      clinic: {},
			rpList: {},
    }
  },
  created() {
    let breadList = [
        { path: "/index", title: "首页" },
        {
            path: "",
            title: "统计分析"
        },
        {
            path: "/index/operation/statisticAnalysis/prescriptionInvalid/index",
            title: "无效处方分析"
        }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    this.getData();
  },
  methods: {
    getDaysBetween(dateString1,dateString2){
        var  startDate = Date.parse(dateString1);
        var  endDate = Date.parse(dateString2);
        if (startDate>endDate || startDate==endDate){
          this.stylecss = "width:100%;height:400px"
        }else{
          var days=(endDate - startDate)/(1*24*60*60*1000) +1;
          if(days<=7){
            this.stylecss = "width:100%;height:400px"
          }else if(days >7){
            let num = 0;
            if(days > 8){
              num = (days -8)*15
            }
            this.stylecss = "width:"+(days*120+40 -num)+"px;height:400px"
          }
        }
    },
    getData(invoker) {
      if (invoker === 'searchBtn') {
        if (!this.filterObj.fromTime) {
          this.$Message.error('请选择开始时间');
          return false;
        } else if (!this.filterObj.endTime) {
          this.$Message.error('请选择结束时间');
          return false;
        }
        this.filterObj.timeType = null;
        this.chartOptionFlag = false;
        this.getDaysBetween(this.filterObj.fromTime, this.filterObj.endTime)
      }
      this.findPdWxNumber();
      this.findPdWxList();
    },
    handleSearch() {
      this.getData('searchBtn');
    },
     // 关闭弹框
    showModal() {
      console.log(333333333)
      this.madecode = false
    },
    loadPage(index) {
      this.madecode = false
      this.pageNo = index;
      this.findPdWxList();
    },
    onPharmacistOk(record) {
      this.filterObj.pharmacistId = record.id;
      this.pharmacistName = record.name;
      this.showChoosePharmacistModal = false;
    },
    reset() {
      this.filterObj = this.deepClone(filterObj);
      this.pageSize = 10;
      this.pageNo = 1;
      this.pharmacistName = null;
      this.getData();
    },
    //柱状图、饼图
    findPdWxNumber() {
      const params = this.deepClone(this.filterObj);
      params.hospitalId = params.docInfo[0];
      params.departmentId = params.docInfo[1];
      params.doctorId = params.docInfo[2];
      delete params.docInfo;

      params.fromTime = Utils.getNowDateBySpecialFormat(this.filterObj.fromTime);
      params.endTime = Utils.getNowDateBySpecialFormat(this.filterObj.endTime);

      console.log('chart', JSON.stringify(params));

      this.$axios
        .post(api.getPdWxNumber, params)
        .then(res => {
          if (res.data.code === 1) {
            this.chartOptionFlag = true;
            let ret = res.data.object;
            console.log('图表',ret)
            this.resObj = ret;
            this.chartOptionBar.xAxis[0].data = this.resObj.zzMap.datearr;
            this.chartOptionBar.series[0].data = this.resObj.zzMap.bhgarr;
            this.chartOptionBar.series[1].data = this.resObj.zzMap.ccgarr;
            this.chartOptionBar.series[2].data = this.resObj.zzMap.yygarr;

            this.chartOptionPie.legend.data = this.resObj.bzMap.map(item => item.name);
            this.chartOptionPie.series[0].data = this.resObj.bzMap;

          } else {
            this.$Message.info(res.data.message);
          }
        })
        .catch(() => {
        });
    },
    //不合规处方信息列表
    findPdWxList() {
      const params = this.deepClone(this.filterObj);
      params.hospitalId = params.docInfo[0];
      params.departmentId = params.docInfo[1];
      params.doctorId = params.docInfo[2];
      delete params.docInfo;

      params.fromTime = Utils.getNowDateBySpecialFormat(this.filterObj.fromTime);
      params.endTime = Utils.getNowDateBySpecialFormat(this.filterObj.endTime);

      params.pageNo = this.pageNo;
      params.pageSize = this.pageSize;
      console.log('list', JSON.stringify(params));
      this.tableLoading = true;
      this.$axios
        .post(api.getPdWxList, params)
        .then(res => {
          if (res.data.code === 1) {
            let ret = res.data.object;
            this.tableData = ret.records;
            console.log(this.tableData)
            this.count = ret.total;
          } else {
            this.$Message.info(res.data.message);
          }
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    handleDetail(record) {
      this.madecode = true
      let reqData = {
        rxId: record.rxId
      }
      this.$axios
        .post(api.getClinicPrescriptionsByClinicId, reqData)
        .then(res => {
          if (res.data.code === 1) {
            this.clinic = res.data.object;
            this.rpList = res.data.object.rpList
            console.log(this.clinic)
            if(this.clinic.prescriptionSignature){this.clinic.prescriptionSignature = this.fileBaseUrl + JSON.parse(res.data.object.prescriptionSignature).smallFileName}
            if(this.clinic.prescriptionReview){this.clinic.prescriptionReview = this.fileBaseUrl + JSON.parse(res.data.object.prescriptionReview).smallFileName}
            if(this.clinic.twoDimensionCode){this.clinic.twoDimensionCode = this.fileBaseUrl + JSON.parse(res.data.object.twoDimensionCode).smallFileName}
            if(this.clinic.fyDoctorSignature){this.clinic.fyDoctorSignature = this.fileBaseUrl + JSON.parse(res.data.object.fyDoctorSignature).smallFileName}
          } else {
            this.$Message.error(res.data.message || "请求异常");
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    deepClone(obj) {
      return JSON.parse(JSON.stringify(obj));
    }
  },
  watch: {
    pageSize(nv, ov) {
      this.findPdWxList();
    },
    'filterObj.timeType'(n) {
      if (n || (n === 0)) {
        this.filterObj.fromTime = null;
        this.filterObj.endTime = null;
        this.getData();
      }
    }
  }
}
</script>

<style scoped lang="less">
.prescriptionInvalid-page {
    width: 100%;
    min-width: 1200px;
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    .filter-part {
      display: flex;
      flex-wrap: wrap;
      .filter-item {
        display: flex;
        margin: 10px 10px 10px 0;
        line-height: 32px;
        &>label {
          white-space: nowrap;
          line-height: 32px;
          padding-left: 5px;
          text-align: right;
        }
        .input {
          width: 220px;
        }
        .select {
          width: 70px;
        }
        .content {
          padding-right: 5px;
        }
      }
      .filter-btn-group {
        margin: 10px 10px 10px 0;
        flex: 0 0 auto;
      }
    }
    .chart-part {
      padding: 10px;
      border: 1px solid #ccc;
      margin-top: 10px;
    }
    .table {
      .page-wrapper {
        display: flex;
        // margin-top: 20px;
        justify-content: space-between;
        .des {
          display: flex;
          align-items: center;
          .select {
            width: 50px;
          }
        }
        .pages {
        }
      }
    }
}
.PerMask{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	.PerMask-com{
		padding-bottom: 30px;
		background-size:cover;
		position: relative;
		top:0;
		left:0;
		overflow: scroll;
		background-image: url('../../../assets/images/report_bg.jpg');
		.com-right{
			height: calc(100% - 40px);
			font-size: 14px;
			color: #242526;
			.com-left-one{
				width: 100%;
				height: calc(100% - 110px);
				overflow: auto;
			}
			.com-left-two{
				width: 100%;
				height: calc(100% - 81px);
				overflow: auto;
			}
			.com-left-one::-webkit-scrollbar,
			.com-left-two::-webkit-scrollbar{
				height: 0;
				width: 0;
			}
			.physician{
				width: 100%;
				min-height: 10px;
				margin-left: 5px;
				padding-top: 5px;
				span{
					display: inline-block;
					min-width: 32%;
					color: #999;
					font-size: 14px;
					line-height: 25px;
					display: inline-block;
					text-align: left;
					margin-bottom:5px;
					small{
						font-size: 12px;
						color: #333;
						font-weight: 500;
					}
					img{
						width: 80px;
						height: 50px;
						vertical-align: middle;
					}
				}
			}
			.line{
				width: 97%;
				height: 10px;
				margin-left: 5px;
				border-top:2px solid #333333;
				border-bottom:2px solid #333333;
			}
			.header{
				width: 100%;
				min-height: 100px;
				padding: 10px;
				text-align: center;
				position: relative;
				p:nth-child(1){
					font-size:20px;
					color: #333;
					font-weight: 500;
					margin: 10px 0;
				}
				p:nth-child(2){
					font-size:22px;
					color: #333;
					margin: 10px 0;
					font-weight: 500;
				}
				p:nth-child(3){
					border: 1px solid #999;
					width: 70px;
					height: auto;
					line-height: 26px;
					color: #333;
					font-size: 20px;
					position: absolute;
					top: 15px;
					left: 15px;
				}
				img{
					width: 80px;
					height: 80px;
					position: absolute;
					top: 10px;
					right: 15px;
				}
				.nub{
					padding: 15px 0 20px 0;
					span{
						color: #333;
						font-size: 15px;
						b{
							color: #999;
							font-size: 13px;
						}
					}
				}
			}

		}
	}
	.result{
		width: 98%;
		min-height: 160px;
		max-height: 300px;
		overflow-y: scroll;
		margin-left: 5px;
		position: relative;
		.title{
			color: #999;
			font-size: 14px;
			margin: 8px 0;
		}
		.dhei{
			border-bottom:1px dashed #cccccc;
		}
		.text{
			color: #333;
			font-size: 16px;
			font-weight: 500;
			line-height: 26px;
			letter-spacing: 1px;
		}
		.tt{
			display: inline-block;
			color: #333;
			font-size: 18px;
			font-weight: 500;
			letter-spacing: 1px;
		}
		.nub{
			font-size: 16px;
			color: #999;
			margin: 5px 0;
		}
		img{
			width: 80px;
			height: 80px;
			position: absolute;
			bottom: 25px;
			right: 10px;
		}
	}
	.essential{
		width: 98%;
		min-height: 100px;
		margin-left: 8px;
		padding: 7px 0;
		border-bottom:1.5px solid #cccccc;
		box-sizing: border-box;
		span{
			color: #999;
			font-size: 14px;
			line-height: 25px;
			display: inline-block;
			text-align: left;
			small{
				color: #333;
				font-size: 14px;
				font-weight: 500;
			}
		}
		span:nth-child(1){
			margin-right: 150px;
		}
		span:nth-child(2){
			margin-right: 80px;
		}
		span:nth-child(4){
			margin-right: 45px;
		}
		span:nth-child(6){
			margin-right: 65px;
		}
		span:nth-child(7){
			margin-right: 65px;
		}
		span:nth-child(8){
			margin-right: 25px;
		}
	}
}
</style>
